<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table1</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="lib2.4/layui/css/layui.css"  media="all">
  <link rel="stylesheet" type="text/css" href="css/xadmin.css"/>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="lib2.4/layui/layui.js" charset="utf-8"></script>
  <script src="js/xadmin.js" type="text/javascript"></script>
  <style type="text/css">
  	td div.layui-table-cell{
  	height:100px;
    line-height: 100px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px 15px;
    overflow: hidden;
    }
  </style>
  <script type="text/javascript">
  	$(function(){
  		table('data.json');
  	});
  	
  	function table(url){
			layui.use('table', function(){
			  var table = layui.table;
			  table.render({
			    elem: '#test'
			    ,url:url
			    ,toolbar: '#toolbarDemo'
			    ,title: '用户数据表'
			    ,cols: [[
			      {type: 'checkbox', fixed: 'left'}
			      ,{field:'studentId', title: '学号',fixed: 'left', align: 'center'}
				    ,{field:'name', title: '姓名', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				    ,{field:'cyd', title: '参与度', sort: true, align: 'center'}
				    ,{field:'zxsc', title: '在线时长', sort: true, align: 'center'}
				    ,{field:'lxt', title: '练习题数', sort: true, align: 'center'}
				    ,{field:'mean', title: '平均数', sort: true, align: 'center'} //单元格内容水平居中
				    ,{field:'sum', title: '综合指标', sort: true, align: 'center'} //单元格内容水平居中
				    ,{field:'rank', title: '全网排名', sort: true, align: 'center'}
				    ,{field: 'picture', title: '头像',width: 150,style:'height:100%;max-width:100%;',templet:'<div><img src="{{ d.picture}}"></div>'}
			      ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align: 'center',width: 150}
			    ]]
			  });
			  
			  //头工具栏事件
			  table.on('toolbar(test)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
			    	//删除数据
			      case 'getCheckData':
			        var data = checkStatus.data;
			        layer.alert(JSON.stringify(data));
			      break;
			    };
			  });
//      JSONArray jsonArray = JSONArray.fromObject(data);
//      String result = "{\"code\":0,\"ms\":\"\",\"count\":0,\"data\":"+jsonArray+"}";
			  //监听行工具事件
			  table.on('tool(test)', function(obj){
			    var data = obj.data;
			    //console.log(obj)
			    if(obj.event === 'del'){
//			    	alert(data.studentId);
			      layer.confirm('确定删除？', function(index){
			        obj.del();
			        layer.close(index);
			      });
			    } else if(obj.event === 'edit'){
			      x_admin_show("编辑","index.html",400,400);
			    }
			  });
			});  		
  	}
  </script>
</head>
<body class="layui-anim layui-anim-upbit">
	<div class="x-nav">
	  <span class="layui-breadcrumb">
	    <a><cite>管理员信息管理</cite></a>
	  </span>
	  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
	    <i class="layui-icon" style="line-height:7px">&#xe669;</i></a>
	</div>
	<div class="x-body">
		<div class="layui-row">
	    <form class="layui-form layui-col-md12 x-so" onsubmit="return false">
	    	<font size="4">请输入管理员编号：</font>
	      <input type="text" name="student_ID" autocomplete="off" class="layui-input">
	      <input class="layui-btn" type="button" id="GetBtn" value="查询">
	    </form>
	  </div>
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>


<!--头工具栏-->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-danger" lay-event="getCheckData"><i class="layui-icon">&#xe640;</i>批量删除</button>
    <button class="layui-btn" onclick="x_admin_show('添加管理员','index.html',450,400)"><i class="layui-icon">&#xe654;</i>添加</button>
  </div>
</script>
 
 <!--行工具栏-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>
              
</body>
</html>